<template>
  <div class="home">
    <h1>这是home页面</h1>
    <!-- 使用 router-link 组件进行导航,也可以用a标签，router-link渲染后也是a标签 -->
    <nav>
      <router-link to="/day1" class="link">第一天</router-link>
      <router-link to="/day2" class="link">第二天</router-link>
      <router-link to="/day3" class="link">第三天</router-link>
      <router-link to="/day4" class="link">第四天</router-link>
      <router-link to="/day5" class="link">第五天</router-link>
      <router-link to="/artcle/123" class="link">第六天</router-link>
      <router-link to="/day7" class="link">第七天</router-link>
      <router-link to="/day8" class="link">第八天</router-link>
      <router-link to="/day9" class="link">第九天</router-link>
      <router-link to="/day10" class="link">第10天</router-link>
      <router-link to="/day11" class="link">第11天</router-link>
      <router-link to="/day12" class="link">第12天</router-link>
    </nav>
    <h2>演示跳转到文章页面不用router-link</h2>
    <el-button type="primary" size="small" @click="jumpArtcle"
      >点击事件跳转文章页面</el-button
    >
    <el-button type="primary" size="small" @click="jumpList"
      >点击事件跳转列表页面</el-button
    >
  </div>
</template>

<script>
export default {
  name: 'home-page',
  methods: {
    jumpArtcle() {
      // 编程式导航跳转几种方法网站：https://router.vuejs.org/zh/guide/essentials/navigation.html#%E5%AF%BC%E8%88%AA%E5%88%B0%E4%B8%8D%E5%90%8C%E7%9A%84%E4%BD%8D%E7%BD%AE
      // this.$router.push('/artcle/456')
      // this.$router.push({ path: '/artcle/789' })
      this.$router.push({ name: 'artclePage', params: { id: 234 } }) // name来自路由文件命名
    },
    jumpList() {
      // this.$router.push('/list?pageSizes=1&total=20')
      // this.$router.push({ path: '/list?pageSizes=1&total=20' })
      this.$router.push({
        name: 'listPage',
        query: { pageSizes: 1, total: 30 }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.link {
  color: #333;
  margin-right: 15px;
  font-size: 20px;
}
</style>
